<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link href="css/widgets.css" rel="stylesheet"/>
    <title>TerrainClippingPlanes</title>

    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css/style.css"/>

    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="css/contextMenu.css"/>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>


    <script type="text/javascript" src="js/Sandcastle-header.js"></script>
    <script type="text/javascript" src="js/require.js"></script>
    <script type="text/javascript" src="js/Cesium.js"></script>
    <script type="text/javascript" src="js/jquery.contextMenu.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
    @import url(./css/bucket.css);
    #toolbar {
        background: rgba(42, 42, 42, 0.8);
        padding: 4px;
        border-radius: 4px;
    }
    #toolbar input {
        vertical-align: middle;
        padding-top: 2px;
        padding-bottom: 2px;
    }
</style>

<body>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
</div>

<script>
    // Use clipping planes to selectively hide parts of the globe surface.

    var viewer = new Cesium.Viewer('cesiumContainer', {
        skyAtmosphere: false,
        shouldAnimate : true,
        terrainProvider: Cesium.createWorldTerrain(),
        scene3DOnly: true
    });
    
    var globe = viewer.scene.globe;

    var exampleTypes = ['Cesium Man'];
    var viewModel = {
        exampleTypes : exampleTypes,
        currentExampleType : exampleTypes[0],
        clippingPlanesEnabled : true,
        edgeStylingEnabled : true
    };
    // var toolbar = document.getElementById('toolbar');
    // Cesium.knockout.track(viewModel);
    // Cesium.knockout.applyBindings(viewModel, toolbar);

    // For tracking state when switching exampleTypes
    var clippingPlanesEnabled = true;
    var edgeStylingEnabled = true;

    var tileset;

    loadCesiumMan();

    function reset() {
        viewer.entities.removeAll();
        viewer.scene.primitives.remove(tileset);
    }

    function loadCesiumMan() {
        // var position = Cesium.Cartesian3.fromRadians(-2.0862979473351286, 0.6586620013036164, 1400.0);
        var position = Cesium.Cartesian3.fromDegrees(100.980071, 39.770983, 1400.0);

        var entity = viewer.entities.add({
            position : position,
            box : {
                dimensions : new Cesium.Cartesian3(1400.0, 1400.0, 2800.0),
                material : Cesium.Color.WHITE.withAlpha(0.0),
                outline : true,
                outlineColor : Cesium.Color.WHITE
            }
        });

        viewer.entities.add({
            position : position,
            model : {
                uri : 'model/CesiumMan/Cesium_Man.glb',
                minimumPixelSize : 128,
                maximumScale : 800
            }
        });

        globe.depthTestAgainstTerrain = true;
        globe.clippingPlanes = new Cesium.ClippingPlaneCollection({
            modelMatrix : entity.computeModelMatrix(Cesium.JulianDate.now()),
            planes : [
                new Cesium.ClippingPlane(new Cesium.Cartesian3( 1.0,  0.0, 0.0), -100.0),
                new Cesium.ClippingPlane(new Cesium.Cartesian3(-1.0,  0.0, 0.0), -100.0),
                new Cesium.ClippingPlane(new Cesium.Cartesian3( 0.0,  1.0, 0.0), -100.0),
                new Cesium.ClippingPlane(new Cesium.Cartesian3( 0.0, -1.0, 0.0), -100.0)
            ],
            edgeWidth: edgeStylingEnabled ? 1.0 : 0.0,
            edgeColor: Cesium.Color.WHITE,
            enabled : clippingPlanesEnabled
        });

        viewer.trackedEntity = entity;
    }

    Cesium.knockout.getObservable(viewModel, 'clippingPlanesEnabled').subscribe(function(value) {
        globe.clippingPlanes.enabled = value;
        clippingPlanesEnabled = value;
    });

    Cesium.knockout.getObservable(viewModel, 'edgeStylingEnabled').subscribe(function(value) {
        edgeStylingEnabled = value;
        globe.clippingPlanes.edgeWidth = edgeStylingEnabled ? 1.0 : 0.0;
    });

    Cesium.knockout.getObservable(viewModel, 'currentExampleType').subscribe(function(newValue) {
        // reset();
        loadCesiumMan();
    });


</script>
</body>
</html>
